<template>
	<view style="padding-bottom: 180upx;margin: 0 20upx;">
		<navigator :url="'../insure_info/insure_info?InsureOrderSN='+InsureOrderSN">
			<view class="zcModel-title zcJustifyC_between">车辆信息<view class="iconfont icon-unie6a3 uni-flex zcAlignI_center">投保信息</view></view>
		</navigator>
		<view class="zcModel-card">
			<view class="zcModel-card-item uni-flex zcAlignI_center">
				<view>车牌号：</view>
				<view>{{VehiclePlateNo}}</view>
			</view>
			<view class="zcModel-card-item uni-flex zcAlignI_center">
				<view>车架号：</view>
				<view>{{VehicleVIN}}</view>
			</view>
			<view class="zcModel-card-item uni-flex zcAlignI_center">
				<view>车型：</view>
				<view>{{VehicleType}}</view>
			</view>
			<view class="zcModel-card-item uni-flex zcAlignI_center">
				<view>客户：</view>
				<view>{{CustomerName}}</view>
			</view>
		</view>
		
		<view class="zcModel-title uni-flex zcJustifyC_between"><view @tap="upInsureCompany" class="iconfont icon-unie6a42-after">选择保险公司</view></view>
		
		<view style="box-shadow:1upx 1upx 10upx 5upx #E5E5E5;" v-if="InsureCompanys.length > 0" >
			<block v-for="(item,index) in InsureCompanys" :key="index" >
				<view class="uni-flex zcFlex_column" style="border-bottom: 3px solid #F8F8F8;">
					<view class="zcPicker-model uni-flex zcAlignI_center zcJustifyC_between" :class="zcPickerShow?'zcPicker-active':''">
						<view class="uni-flex zcAlignI_center uni-flex-item">
							<image lazy-load="true" :src="(item.Logo && item.Logo.SUrl)?item.Logo.SUrl:(imgPath+'UniImages/ZH_renbao.png')" mode="widthFix"></image>
							<view class="uni-flex zcFlex_column uni-flex-item">
								<view class="uni-flex zcAlignI_center">
                                    {{item.Name}}
                                    <view class="zcPicker-label" :class="zcPickerShow?'zcPicker-label-active':''" v-show="item.IsLastCompany">上年</view>
                                </view>
								<view>[ {{item.WorkNumber}} ]</view>
							</view>
						</view>
						<view class="uni-flex zcAlignI_center zcJustifyC_between">
							<!--  按钮状态：  立即算价/算价中/算价结果 -->
                            <view><button class="butActive2" v-if="item.Status==='算价结果'" @tap="zcPickerActive(index,false)">{{'￥'+item.money}}</button></view>
							<view><button :class="item.Status==='算价中'?'butActive1':''" @tap="zcPickerActive(index,true)">{{item.Status==='算价中'?'报价中':'立即报价'}}<view>({{item.UsedCount}}/{{item.MaxCount}})</view></button></view>
						</view>
					</view>
					<view class="zcPicker-model uni-flex zcAlignI_center zcJustifyC_between" style="border: 2upx solid #3ca4fa;" v-show="zcPickerShowIndex == index">
						<view class="uni-flex zcAlignI_center"><image lazy-load="true" :src="imgPath+'UniImages/ZH_renbao.png'" mode="widthFix"></image></view>
						<view class="uni-flex zcAlignI_center zcJustifyC_between uni-flex-item">
							<input type="text" value="" placeholder="请输入验证码" placeholder-style="color:#cecece;" />
						</view>
					</view>
				</view>
			</block>
		</view>
		<view style="box-shadow:1upx 1upx 10upx 5upx #E5E5E5;" v-if="InsureCompanys.length < 1 && isNoDataShow" >
			<view class="zcModel-card-item uni-flex zcAlignI_center zcJustifyC_center">
				<view class="uni-flex zcAlignI_center zcJustifyC_center">
					<view class="no_model">
						<image :src="imgPath+'UniImages/no_data.png'" mode="widthFix" style="width: 100%;"></image>
						<view class="no_text">暂无数据</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="zcFooter-but uni-flex iconfont">
			<button size="mini" @tap="toPathHome">
				首页
			</button>
		</view>
	</view>
</template>

<script>
	
	let _this;
	export default {
		data() {
			return {
				imgPath:this.$ZcPublic.Domain,
				isNoDataShow:false,
				InsureOrderSN:'',
				VehiclePlateNo:'',	// 车牌号
				VehicleVIN:'',	// 车架号
				VehicleType:'',	// 车型
				CustomerName:'',	// 客户姓名
				zcInsureIndex:0,
				zcPickerShowIndex:-1,
				InsureCompanys:[],	// 保险公司 列表
				
				Status:'立即报价',
				UsedCount:0,
				MaxCount:2,
			}
		},
		onLoad(e) {
			_this = this;
			if (e.InsureOrderSN) {
				let InsureOrderSN = e.InsureOrderSN;
				_this.InsureOrderSN = InsureOrderSN;
				
				_this.zcGetInsureOrder(InsureOrderSN);	// 获取保险 订单信息
				_this.zcQueryInsureCompany4InsureQuato(InsureOrderSN);	// 获取 保险公司列表
			}
		},
		methods: {
			toPathHome() {
				uni.switchTab({
					url:'../home/home'
				})
			},
			zcPickerActive(id,bl) {
				if (_this.InsureCompanys[id].Status === '算价中' ||( _this.InsureCompanys[id].Status === '算价结果' && !bl)) {
					if (_this.InsureCompanys[id].Status === '算价结果') {
						uni.navigateTo({
							url: '../insurePrice_result/insurePrice_result?InsureOrderSN='+_this.InsureCompanys[id].OrderSN
						});
					}
					return
				}
                if (_this.InsureCompanys[id].UsedCount == _this.InsureCompanys[id].MaxCount) {
                    uni.showModal({
                        title: '温馨提示',
                        content: '尊敬的用户，报价次数已用完，请明天再报价！',
                        showCancel: false
                    });
                    return;
                }
				_this.InsureCompanys[id].Status = '算价中';
				_this.InsureCompanys[id].UsedCount = parseInt(_this.InsureCompanys[id].UsedCount)+1;
				
				let InsureQuato = {
					OrderSN : _this.InsureOrderSN,	// 保单 SN
					VehicleVIN : '',	// 车架号
					InsureCompanySN : _this.InsureCompanys[id].SN,	 // 保险公司 SN
					WorkNumber : _this.InsureCompanys[id].WorkNumber,	// 工号
					VerifyCode : ''	// 验证码
				}
				
				
				_this.$ZcPublic.Server.Post({
					IsNeedLogin: true,
					Paras: {
						Name: 'uni_Insure_Detail',
						Action: 'Ext_SubmitInsureOrder4InsureQuato',
						Data: InsureQuato
					},
					Callback:function(resjson,scope) {
						if (resjson.state === 'back') {
							if (!resjson.success) {
								uni.showModal({
									title:'温馨提示',
									showCancel:false,
									content:''+resjson.msg
								})
                                _this.InsureCompanys[id].Status = '立即报价';
                                _this.InsureCompanys[id].UsedCount = parseInt(_this.InsureCompanys[id].UsedCount)-1;
								return;
							}
							
							uni.showToast({
								title:'提交成功！',
								success: () => {
									// uni.switchTab({
									//     url: '../home/home'
									// });
								}
							})
						} else{
							
						}
						
					},
					Scope: this
				})
				
			},
			//  刷新保险公司
			upInsureCompany() {
				uni.showLoading({
					title: '刷新中',
					mask: true
				});
				_this.zcQueryInsureCompany4InsureQuato(_this.InsureOrderSN);
			},
			//  ------- 接口区 ---------
			zcGetInsureOrder(SN) {	// 获取 保单详情接口
				_this.$ZcPublic.Server.Post({
					IsNeedLogin: true,
					Paras: {
						Name: 'uni_Insure_Detail',
						Action: 'Ext_GetInsureOrder',
						Data: {
							SN:SN
						}
					},
					Callback:function(resjson,scope) {
						if (resjson.state === 'back') {
							console.log('保单 信息 = ',resjson.data);
							if (!resjson.success) {
								uni.showModal({
									title:'温馨提示',
									showCancel:false,
									content:''+resjson.msg
								})
								return;
							}
							
							if (resjson.data.VehiclePlateNo) {
								_this.VehiclePlateNo = resjson.data.VehiclePlateNo;	// 车牌号
							}
							if (resjson.data.VehicleVIN) {
								_this.VehicleVIN = resjson.data.VehicleVIN;	// 车架号
							}
							if (resjson.data.VehicleType) {
								_this.VehicleType = resjson.data.VehicleType;	// 车型
							}
							if (resjson.data.CustomerName) {
								_this.CustomerName = resjson.data.CustomerName;	// 客户名称
							}
						} else{
							
						}
						
					},
					Scope: this
				})
				
			},
			zcQueryInsureCompany4InsureQuato(OrderSN) {		// 获取 保险公司 列表接口
				_this.$ZcPublic.Server.Post({
					IsNeedLogin: true,
					Paras: {
						Name: 'uni_Insure_Detail',
						Action: 'Ext_QueryInsureCompany4InsureQuato',
						Data: {
							OrderSN:OrderSN
						}
					},
					Callback:function(resjson,scope) {
						if (resjson.state === 'back') {
							console.log('保险公司 列表 = ',resjson.data);
							if (!resjson.success) {
								uni.showModal({
									title:'温馨提示',
									showCancel:false,
									content:''+resjson.msg
								})
								return;
							}
							
							if (resjson.data.length > 0) {
								let list = resjson.data;
								for (let i = 0; i < list.length; i++) {
									let str = list[i].Status;
									
									if (str.split('(')[0] === '算价结果') {
										list[i].money = str.split('(')[1].split(')')[0];
										list[i].Status = '算价结果';
									}
								}
								_this.InsureCompanys = list;
								
							}else {
								_this.isNoDataShow = true;
							}
						}
                        if (resjson.state === 'end') {
                            uni.hideLoading();
                        }
						
					},
					Scope: this
				})
			},
			//  ---------- END --------
		}
	}
</script>

<style>
	.zcModel-title{font-size: 28upx;padding: 18upx 0;font-weight: 500;display: flex;color: #999999;}
	.zcModel-title>view{font-size: 28upx;font-weight: 500;}
	
	.zcModel-card{margin-bottom: 30upx;box-shadow:1upx 1upx 10upx 5upx #E5E5E5;}
	.zcModel-card-item{background-color: #FFFFFF;padding: 10upx 20upx;font-size: 20upx;box-sizing: border-box;}
	.zcModel-card-item view{display: flex;box-sizing: border-box;font-size: 28upx;}
	.zcModel-card-item view:first-child{width: 30%;}
	.zcModel-card-item-text{white-space: normal;display: block;}
	.icon-unie6a42-after:after{content: "\e66e";margin: 0 20upx;}
	
	.zcPicker-model{background-color: #FFFFFF;padding: 20upx 0;}
	.zcPicker-model view{flex-shrink: 0;}
	.zcPicker-model>view:first-child>view>view{font-size: 26upx;line-height: 1!important;}
	.zcPicker-model>view:last-child>view{display: flex;flex-shrink: 0;}
	.zcPicker-model>view:last-child>view button{display: flex;flex-shrink: 0;}
	.zcPicker-model image{width: 80upx;margin: 0 10upx;}
	.zcPicker-label{border: 2upx solid #26a6ff;color: #26a6ff;border-radius: 26upx;padding: 0upx 20upx;height: 30upx;line-height: 1.2;background-color: rgba(38, 166, 255, 0.27);font-size: 20upx!important;margin-right: 20upx;margin-left: 10upx;}
	.zcPicker-label-active{border: 2upx solid #FFFFFF;color: #FFFFFF;}
	.zcPicker-model button{font-size: 28upx;padding: 0 20upx;background-color: #3CA4FA;color: #FFFFFF;line-height: 2;margin-right: 10upx;margin-left: 6upx;/*width: 230upx!important;*/}
	.zcPicker-model .butActive1{background-color: #5bd1b9!important;}
	.zcPicker-model .butActive2{background-color: #ffae5d!important;}
	
	.zcPicker-active{background-color: #3ca4fa;color: #FFFFFF;}
	.zcPicker-active button{color: #3ca4fa;background-color: #FFFFFF;}
	.zcPicker-model input{border: 2upx solid #e6e6e6;margin: 0 30upx;flex: 1;font-size: 28upx;padding: 10upx 20upx;}
	
	.zcFooter-but{position: fixed;bottom: 40upx;left: 50%;width: 120upx;height: 120upx;border-radius: 100%;overflow: hidden;z-index: 10;background-color: #F4F5F6!important;margin-left: -60upx;box-shadow: 0 0 20upx #999999;}
	.zcFooter-but button{background-color: rgba(60, 164, 250, 1);color: #FFFFFF;width: 100%;padding: 0!important;display: flex!important;align-items: flex-end;justify-content: center;position: relative;}
	.zcFooter-but button:before{
		content: '\e625';
		position: absolute;
		color: #FFFFFF;
		top: 6upx;
		left: 44upx;
		font-size: 32upx;
	}
	
	/* .zcFooter-but button:first-child{flex: 1;border: 2upx solid #3CA4FA;color: #3CA4FA;border-radius: 0;}
	.zcFooter-but button:last-child{flex: 1;background-color: rgba(60, 164, 250, 1);color: #FFFFFF;border-radius: 0;}
	.button-hover {opacity: 0.6;} */
	
	/* 无数据样式 */
	.no_model{position: relative;display: flex;flex-direction: column;align-items: center;padding: 0 160upx;padding-top: 100upx;}
	.no_text{font-size: 30upx;color: #999999;position: absolute;bottom: 28upx;}
</style>
